<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="班否 - 上班摸鱼，下班快乐。集日常占卜、倒计时、休闲娱乐于一体的微信小程序">
    <meta name="keywords" content="班否,微信小程序,上班,摸鱼,倒计时,占卜,小游戏">
    <meta name="author" content="班否团队">
    <title>班否 - 上班摸鱼，下班快乐</title>
    <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🏢</text></svg>">
    
    <style>
        :root {
            --primary-gradient: linear-gradient(135deg, #3a7bd5 0%, #00d2ff 100%);
            --primary-color: #3a7bd5;
            --secondary-color: #00d2ff;
            --text-dark: #333;
            --text-light: #666;
            --bg-light: #f8f9fa;
            --white: #ffffff;
            --shadow: 0 4px 20px rgba(58, 123, 213, 0.1);
            --shadow-hover: 0 8px 30px rgba(58, 123, 213, 0.2);
            --border-radius: 12px;
            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            line-height: 1.6;
            color: var(--text-dark);
            overflow-x: hidden;
        }

        /* 导航栏 */
        .navbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            padding: 1rem 0;
            background: transparent;
            transition: var(--transition);
        }

        .navbar.scrolled {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            box-shadow: var(--shadow);
        }

        .nav-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 2rem;
        }

        .logo {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: 1.5rem;
            font-weight: 700;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .logo-icon {
            width: 40px;
            height: 40px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 1.2rem;
        }

        /* 主页面布局 */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 2rem;
        }

        /* 头部区域 */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            background: var(--primary-gradient);
            color: white;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="25" cy="25" r="1" fill="rgba(255,255,255,0.1)"/><circle cx="75" cy="75" r="1" fill="rgba(255,255,255,0.05)"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
            opacity: 0.3;
        }

        .hero-content {
            position: relative;
            z-index: 2;
            animation: fadeInUp 1s ease-out;
        }

        .hero h1 {
            font-size: 3.5rem;
            margin-bottom: 1rem;
            font-weight: 800;
        }

        .hero .slogan {
            font-size: 1.5rem;
            margin-bottom: 2rem;
            opacity: 0.9;
        }

        .cta-button {
            display: inline-block;
            padding: 1rem 2rem;
            background: rgba(255, 255, 255, 0.2);
            color: white;
            text-decoration: none;
            border-radius: var(--border-radius);
            font-weight: 600;
            transition: var(--transition);
            backdrop-filter: blur(10px);
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .cta-button:hover {
            background: rgba(255, 255, 255, 0.3);
            transform: translateY(-2px);
        }

        /* 功能展示区 */
        .features {
            padding: 5rem 0;
            background: var(--bg-light);
        }

        .section-title {
            text-align: center;
            font-size: 2.5rem;
            margin-bottom: 3rem;
            background: var(--primary-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }

        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .feature-card {
            background: var(--white);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            transition: var(--transition);
            text-align: center;
            opacity: 0;
            transform: translateY(20px);
        }

        .feature-card.animate {
            opacity: 1;
            transform: translateY(0);
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: var(--shadow-hover);
        }

        .feature-icon {
            width: 60px;
            height: 60px;
            background: var(--primary-gradient);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.5rem;
            color: white;
        }

        .feature-card h3 {
            font-size: 1.3rem;
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .feature-card p {
            color: var(--text-light);
            line-height: 1.8;
        }

        /* 轮播图区域 */
        .screenshots {
            padding: 5rem 0;
            background: var(--white);
        }

        .carousel-container {
            position: relative;
            max-width: 800px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow-hover);
        }

        .carousel {
            display: flex;
            transition: transform 0.5s ease-in-out;
        }

        .carousel-item {
            min-width: 100%;
            position: relative;
        }

        .carousel-item img {
            width: 100%;
            height: 400px;
            object-fit: cover;
            background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                        linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
            background-size: 20px 20px;
            background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
        }

        .carousel-caption {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            background: linear-gradient(transparent, rgba(0,0,0,0.7));
            color: white;
            padding: 2rem;
            text-align: center;
        }

        .carousel-nav {
            display: flex;
            justify-content: center;
            gap: 0.5rem;
            margin-top: 1rem;
        }

        .carousel-dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: #ddd;
            cursor: pointer;
            transition: var(--transition);
        }

        .carousel-dot.active {
            background: var(--primary-color);
        }

        /* 互动体验区 */
        .interactive {
            padding: 5rem 0;
            background: var(--bg-light);
        }

        .interactive-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .interactive-card {
            background: var(--white);
            padding: 2rem;
            border-radius: var(--border-radius);
            box-shadow: var(--shadow);
            text-align: center;
        }

        .interactive-card h3 {
            margin-bottom: 1rem;
            color: var(--text-dark);
        }

        .countdown-display {
            font-size: 2rem;
            font-weight: bold;
            color: var(--primary-color);
            margin: 1rem 0;
            font-family: 'Courier New', monospace;
        }

        .fortune-result, .food-result {
            min-height: 60px;
            background: var(--bg-light);
            border-radius: var(--border-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 1rem 0;
            font-size: 1.1rem;
            color: var(--text-dark);
        }

        .action-button {
            background: var(--primary-gradient);
            color: white;
            border: none;
            padding: 0.8rem 1.5rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 1rem;
            font-weight: 600;
            transition: var(--transition);
            width: 100%;
            margin-top: 1rem;
        }

        .action-button:hover {
            transform: translateY(-2px);
            box-shadow: var(--shadow-hover);
        }

        .action-button:active {
            transform: translateY(0);
        }

        /* 联系信息区 */
        .contact {
            padding: 5rem 0;
            background: var(--white);
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 2rem;
            margin-top: 3rem;
        }

        .contact-item {
            text-align: center;
            padding: 1rem;
        }

        .qr-code {
            width: 150px;
            height: 150px;
            background: linear-gradient(45deg, #f0f0f0 25%, transparent 25%), 
                        linear-gradient(-45deg, #f0f0f0 25%, transparent 25%), 
                        linear-gradient(45deg, transparent 75%, #f0f0f0 75%), 
                        linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
            background-size: 10px 10px;
            background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
            border-radius: var(--border-radius);
            margin: 0 auto 1rem;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-light);
            font-size: 0.9rem;
        }

        .copy-button {
            background: transparent;
            border: 2px solid var(--primary-color);
            color: var(--primary-color);
            padding: 0.5rem 1rem;
            border-radius: var(--border-radius);
            cursor: pointer;
            font-size: 0.9rem;
            transition: var(--transition);
            margin-top: 0.5rem;
        }

        .copy-button:hover {
            background: var(--primary-color);
            color: white;
        }

        /* 页脚 */
        .footer {
            background: var(--text-dark);
            color: white;
            padding: 2rem 0;
            text-align: center;
            position: relative;
        }

        .back-to-top {
            position: fixed;
            bottom: 2rem;
            right: 2rem;
            width: 50px;
            height: 50px;
            background: var(--primary-gradient);
            color: white;
            border: none;
            border-radius: 50%;
            cursor: pointer;
            font-size: 1.2rem;
            opacity: 0;
            transform: translateY(20px);
            transition: var(--transition);
            z-index: 1000;
        }

        .back-to-top.visible {
            opacity: 1;
            transform: translateY(0);
        }

        .back-to-top:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow-hover);
        }

        /* 响应式设计 */
        @media (max-width: 768px) {
            .nav-container {
                padding: 0 1rem;
            }

            .container {
                padding: 0 1rem;
            }

            .hero h1 {
                font-size: 2.5rem;
            }

            .hero .slogan {
                font-size: 1.2rem;
            }

            .section-title {
                font-size: 2rem;
            }

            .features-grid {
                grid-template-columns: 1fr;
            }

            .interactive-grid {
                grid-template-columns: 1fr;
            }

            .contact-grid {
                grid-template-columns: 1fr;
            }
        }

        /* 动画 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .fade-in {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.6s ease-out;
        }

        .fade-in.animate {
            opacity: 1;
            transform: translateY(0);
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar" id="navbar">
        <div class="nav-container">
            <div class="logo">
                <div class="logo-icon">🏢</div>
                <span>班否</span>
            </div>
        </div>
    </nav>

    <!-- 头部区域 -->
    <section class="hero" id="hero">
        <div class="container">
            <div class="hero-content">
                <h1>班否</h1>
                <p class="slogan">上班摸鱼，下班快乐</p>
                <a href="#features" class="cta-button">探索功能</a>
            </div>
        </div>
    </section>

    <!-- 功能展示区 -->
    <section class="features" id="features">
        <div class="container">
            <h2 class="section-title fade-in">核心功能</h2>
            <div class="features-grid">
                <div class="feature-card fade-in">
                    <div class="feature-icon">📅</div>
                    <h3>日常一览</h3>
                    <p>每日占卜预测运势，下班倒计时让你充满期待，收入实时计算让你更有动力</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">🎮</div>
                    <h3>休闲娱乐</h3>
                    <p>精选小游戏打发无聊时光，热点资讯让你紧跟时代步伐</p>
                </div>
                <div class="feature-card fade-in">
                    <div class="feature-icon">🛠️</div>
                    <h3>实用工具</h3>
                    <p>饮水记录守护健康，美食选择解决选择困难症</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 小程序展示区 -->
    <section class="screenshots" id="screenshots">
        <div class="container">
            <h2 class="section-title fade-in">功能预览</h2>
            <div class="carousel-container">
                <div class="carousel" id="carousel">
                    <div class="carousel-item">
                        <img src="/images/screenshot1.png" alt="主界面" loading="lazy">
                        <div class="carousel-caption">
                            <h3>简洁主界面</h3>
                            <p>一目了然的功能布局，轻松找到你需要的工具</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/images/screenshot2.png" alt="每日占卜" loading="lazy">
                        <div class="carousel-caption">
                            <h3>每日占卜</h3>
                            <p>开启美好一天，预测今日运势</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/images/screenshot3.png" alt="下班倒计时" loading="lazy">
                        <div class="carousel-caption">
                            <h3>下班倒计时</h3>
                            <p>精确到秒的倒计时，让等待变成期待</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/images/screenshot4.png" alt="小游戏" loading="lazy">
                        <div class="carousel-caption">
                            <h3>休闲小游戏</h3>
                            <p>轻松有趣的游戏，缓解工作压力</p>
                        </div>
                    </div>
                    <div class="carousel-item">
                        <img src="/images/screenshot5.png" alt="实用工具" loading="lazy">
                        <div class="carousel-caption">
                            <h3>实用工具集</h3>
                            <p>贴心的生活小助手，让日常更便捷</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="carousel-nav">
                <span class="carousel-dot active" data-slide="0"></span>
                <span class="carousel-dot" data-slide="1"></span>
                <span class="carousel-dot" data-slide="2"></span>
                <span class="carousel-dot" data-slide="3"></span>
                <span class="carousel-dot" data-slide="4"></span>
            </div>
        </div>
    </section>

    <!-- 互动体验区 -->
    <section class="interactive" id="interactive">
        <div class="container">
            <h2 class="section-title fade-in">立即体验</h2>
            <div class="interactive-grid">
                <div class="interactive-card fade-in">
                    <h3>🕒 下班倒计时</h3>
                    <div class="countdown-display" id="countdown">设置工作时间</div>
                    <button class="action-button" onclick="setWorkTime()">设置下班时间</button>
                </div>
                <div class="interactive-card fade-in">
                    <h3>🔮 每日占卜</h3>
                    <div class="fortune-result" id="fortune">点击获取今日运势</div>
                    <button class="action-button" onclick="getFortune()">占卜一下</button>
                </div>
                <div class="interactive-card fade-in">
                    <h3>🍽️ 美食选择器</h3>
                    <div class="food-result" id="food">今天吃什么？</div>
                    <button class="action-button" onclick="chooseFood()">随机选择</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 联系信息区 -->
    <section class="contact" id="contact">
        <div class="container">
            <h2 class="section-title fade-in">联系我们</h2>
            <div class="contact-grid">
                <div class="contact-item fade-in">
                    <div class="qr-code">微信小程序码</div>
                    <h4>微信小程序</h4>
                    <p>搜索"班否"或扫码体验</p>
                </div>
                <div class="contact-item fade-in">
                    <div class="qr-code">微信公众号码</div>
                    <h4>微信公众号</h4>
                    <p>关注获取最新资讯</p>
                </div>
                <div class="contact-item fade-in">
                    <div class="qr-code">📱</div>
                    <h4>小红书</h4>
                    <p>@班否官方</p>
                    <button class="copy-button" onclick="copyText('班否官方')">复制账号</button>
                </div>
                <div class="contact-item fade-in">
                    <div class="qr-code">📧</div>
                    <h4>联系邮箱</h4>
                    <p>banfou@example.com</p>
                    <button class="copy-button" onclick="copyText('banfou@example.com')">复制邮箱</button>
                </div>
            </div>
        </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <p>&copy; 2024 班否团队. 保留所有权利. | 让上班变得有趣一点</p>
            <p style="margin-top: 0.5rem; font-size: 0.9rem; opacity: 0.7;">访问统计代码位置</p>
        </div>
    </footer>

    <!-- 回到顶部按钮 -->
    <button class="back-to-top" id="backToTop" onclick="scrollToTop()">↑</button>

    <script>
        // 数据存储（内存替代localStorage）
        let userData = {
            workEndTime: null,
            lastFortune: null,
            fortuneDate: null
        };

        // 导航栏滚动效果
        window.addEventListener('scroll', function() {
            const navbar = document.getElementById('navbar');
            const backToTop = document.getElementById('backToTop');
            
            if (window.scrollY > 100) {
                navbar.classList.add('scrolled');
                backToTop.classList.add('visible');
            } else {
                navbar.classList.remove('scrolled');
                backToTop.classList.remove('visible');
            }
        });

        // 滚动动画
        const observerOptions = {
            threshold: 0.1,
            rootMargin: '0px 0px -50px 0px'
        };

        const observer = new IntersectionObserver(function(entries) {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    entry.target.classList.add('animate');
                }
            });
        }, observerOptions);

        // 观察所有需要动画的元素
        document.querySelectorAll('.fade-in, .feature-card').forEach(el => {
            observer.observe(el);
        });

        // 轮播图功能
        let currentSlide = 0;
        const totalSlides = 5;
        const carousel = document.getElementById('carousel');
        const dots = document.querySelectorAll('.carousel-dot');

        function showSlide(index) {
            carousel.style.transform = `translateX(-${index * 100}%)`;
            dots.forEach(dot => dot.classList.remove('active'));
            dots[index].classList.add('active');
            currentSlide = index;
        }

        // 点击导航点
        dots.forEach((dot, index) => {
            dot.addEventListener('click', () => showSlide(index));
        });

        // 自动轮播
        setInterval(() => {
            currentSlide = (currentSlide + 1) % totalSlides;
            showSlide(currentSlide);
        }, 4000);

        // 下班倒计时功能
        let countdownInterval;

        function setWorkTime() {
            const time = prompt('请输入下班时间（格式：HH:MM，如 18:00）：');
            if (time && /^([01]?[0-9]|2[0-3]):[0-5][0-9]$/.test(time)) {
                const [hours, minutes] = time.split(':').map(Number);
                const now = new Date();
                const endTime = new Date();
                endTime.setHours(hours, minutes, 0, 0);
                
                // 如果时间已过，设置为明天
                if (endTime <= now) {
                    endTime.setDate(endTime.getDate() + 1);
                }
                
                userData.workEndTime = endTime.getTime();
                startCountdown();
            } else if (time !== null) {
                alert('请输入正确的时间格式（如：18:00）');
            }
        }

        function startCountdown() {
            if (countdownInterval) {
                clearInterval(countdownInterval);
            }
            
            countdownInterval = setInterval(() => {
                const now = new Date().getTime();
                const distance = userData.workEndTime - now;
                
                if (distance > 0) {
                    const hours = Math.floor(distance / (1000 * 60 * 60));
                    const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
                    const seconds = Math.floor((distance % (1000 * 60)) / 1000);
                    
                    document.getElementById('countdown').textContent = 
                        `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
                } else {
                    document.getElementById('countdown').textContent = '🎉 下班时间到！';
                    clearInterval(countdownInterval);
                }
            }, 1000);
        }

        // 每日占卜功能
        const fortunes = [
            '今日运势极佳，工作顺利，心情愉悦！✨',
            '财运亨通，可能有意外收获哦！💰',
            '桃花运不错，单身的朋友要把握机会！💕',
            '学习运强，适合充电和提升自己！📚',
            '健康运良好，精神饱满，活力四射！💪',
            '事业运上升，领导可能会注意到你的努力！📈',
            '人际关系和谐，朋友运很不错！👥',
            '创意运爆棚，灵感会不断涌现！💡',
            '今天适合休息，给自己放个小假！🌴',
            '幸运色是蓝色，穿蓝色衣服更加分！💙'
        ];

        function getFortune() {
            const today = new Date().toDateString();
            
            // 检查是否已经占卜过
            if (userData.fortuneDate === today && userData.lastFortune) {
                document.getElementById('fortune').textContent = userData.lastFortune;
                return;
            }
            
            // 生成新的占卜结果
            const fortune = fortunes[Math.floor(Math.random() * fortunes.length)];
            userData.lastFortune = fortune;
            userData.fortuneDate = today;
            
            // 添加动画效果
            const fortuneElement = document.getElementById('fortune');
            fortuneElement.style.opacity = '0';
            fortuneElement.style.transform = 'scale(0.8)';
            
            setTimeout(() => {
                fortuneElement.textContent = fortune;
                fortuneElement.style.opacity = '1';
                fortuneElement.style.transform = 'scale(1)';
                fortuneElement.style.transition = 'all 0.3s ease-out';
            }, 150);
        }

        // 美食选择器功能
        const foods = [
            '🍜 兰州拉面',
            '🍕 意大利披萨',
            '🍱 日式便当',
            '🌮 墨西哥卷饼',
            '🍳 中式快餐',
            '🍔 汉堡薯条',
            '🥗 健康沙拉',
            '🍝 意大利面',
            '🥙 土耳其烤肉',
            '🍲 麻辣火锅',
            '🥘 印度咖喱',
            '🍙 日式饭团',
            '🌯 烤肉卷',
            '🥪 三明治',
            '🍛 盖浇饭'
        ];

        function chooseFood() {
            const foodElement = document.getElementById('food');
            const randomFood = foods[Math.floor(Math.random() * foods.length)];
            
            // 添加动画效果
            foodElement.style.opacity = '0';
            foodElement.style.transform = 'rotateY(90deg)';
            
            setTimeout(() => {
                foodElement.textContent = randomFood;
                foodElement.style.opacity = '1';
                foodElement.style.transform = 'rotateY(0deg)';
                foodElement.style.transition = 'all 0.4s ease-out';
            }, 200);
        }

        // 复制功能
        function copyText(text) {
            if (navigator.clipboard) {
                navigator.clipboard.writeText(text).then(() => {
                    showToast('复制成功！');
                }).catch(() => {
                    fallbackCopy(text);
                });
            } else {
                fallbackCopy(text);
            }
        }

        function fallbackCopy(text) {
            const textArea = document.createElement('textarea');
            textArea.value = text;
            textArea.style.position = 'fixed';
            textArea.style.left = '-999999px';
            textArea.style.top = '-999999px';
            document.body.appendChild(textArea);
            textArea.focus();
            textArea.select();
            
            try {
                document.execCommand('copy');
                textArea.remove();
                showToast('复制成功！');
            } catch (err) {
                textArea.remove();
                showToast('复制失败，请手动复制');
            }
        }

        // 显示提示消息
        function showToast(message) {
            // 移除已存在的toast
            const existingToast = document.querySelector('.toast');
            if (existingToast) {
                existingToast.remove();
            }
            
            const toast = document.createElement('div');
            toast.className = 'toast';
            toast.textContent = message;
            toast.style.cssText = `
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                background: rgba(0, 0, 0, 0.8);
                color: white;
                padding: 1rem 2rem;
                border-radius: 8px;
                font-size: 0.9rem;
                z-index: 10000;
                opacity: 0;
                transition: opacity 0.3s ease;
            `;
            
            document.body.appendChild(toast);
            
            // 显示动画
            setTimeout(() => {
                toast.style.opacity = '1';
            }, 10);
            
            // 隐藏动画
            setTimeout(() => {
                toast.style.opacity = '0';
                setTimeout(() => {
                    if (toast.parentNode) {
                        toast.parentNode.removeChild(toast);
                    }
                }, 300);
            }, 2000);
        }

        // 回到顶部功能
        function scrollToTop() {
            window.scrollTo({
                top: 0,
                behavior: 'smooth'
            });
        }

        // 平滑滚动到锚点
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                const target = document.querySelector(this.getAttribute('href'));
                if (target) {
                    target.scrollIntoView({
                        behavior: 'smooth',
                        block: 'start'
                    });
                }
            });
        });

        // 图片懒加载
        const images = document.querySelectorAll('img[loading="lazy"]');
        const imageObserver = new IntersectionObserver((entries, observer) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const img = entry.target;
                    // 这里可以添加实际的图片加载逻辑
                    observer.unobserve(img);
                }
            });
        });

        images.forEach(img => imageObserver.observe(img));

        // 触摸事件支持（移动端）
        let touchStartX = 0;
        let touchEndX = 0;

        carousel.addEventListener('touchstart', function(e) {
            touchStartX = e.changedTouches[0].screenX;
        });

        carousel.addEventListener('touchend', function(e) {
            touchEndX = e.changedTouches[0].screenX;
            handleSwipe();
        });

        function handleSwipe() {
            const swipeThreshold = 50;
            const diff = touchStartX - touchEndX;
            
            if (Math.abs(diff) > swipeThreshold) {
                if (diff > 0) {
                    // 向左滑动，显示下一张
                    currentSlide = (currentSlide + 1) % totalSlides;
                } else {
                    // 向右滑动，显示上一张
                    currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                }
                showSlide(currentSlide);
            }
        }

        // 页面加载完成后的初始化
        document.addEventListener('DOMContentLoaded', function() {
            // 检查是否有保存的工作时间
            if (userData.workEndTime && userData.workEndTime > new Date().getTime()) {
                startCountdown();
            }
            
            // 添加页面加载动画
            document.body.style.opacity = '0';
            document.body.style.transition = 'opacity 0.5s ease-in-out';
            
            setTimeout(() => {
                document.body.style.opacity = '1';
            }, 100);
        });

        // 防止页面刷新时的闪烁
        window.addEventListener('beforeunload', function() {
            document.body.style.opacity = '0';
        });

        // 添加一些微交互效果
        document.querySelectorAll('.action-button, .copy-button, .cta-button').forEach(button => {
            button.addEventListener('mousedown', function() {
                this.style.transform = 'scale(0.95)';
            });
            
            button.addEventListener('mouseup', function() {
                this.style.transform = '';
            });
            
            button.addEventListener('mouseleave', function() {
                this.style.transform = '';
            });
        });

        // 添加键盘导航支持
        document.addEventListener('keydown', function(e) {
            switch(e.key) {
                case 'ArrowLeft':
                    if (document.activeElement.closest('.carousel-container')) {
                        e.preventDefault();
                        currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                        showSlide(currentSlide);
                    }
                    break;
                case 'ArrowRight':
                    if (document.activeElement.closest('.carousel-container')) {
                        e.preventDefault();
                        currentSlide = (currentSlide + 1) % totalSlides;
                        showSlide(currentSlide);
                    }
                    break;
                case 'Home':
                    if (e.ctrlKey) {
                        e.preventDefault();
                        scrollToTop();
                    }
                    break;
            }
        });
    </script>
</body>
</html>